<template>
  <div class="wrapper">
    <div class="top">
      <div class="top_img" v-if="avatar" @click="tiao()"><img :src='avatar'></div>
      <div class="top_img" v-else @click="tiao()"><img :src="require('../../../assets/img/name_img.png')"></div>
      <div class="top_name" @click="tiao()">{{name}}</div>
      <div class="top_p"  @click="tiao()">搜城，商铺转让专业平台</div>
      <ul class="clearfix">
        <router-link tag="li" :to="'/Mrelease/0'">
          <span class="iconfont icon-fabujishu"></span>
          <div>我的发布</div>
        </router-link>
        <div class="xian"></div>
        <router-link tag="li" :to="'/Mcollection'">
          <span class="iconfont icon-favourited"></span>
          <div>我的收藏</div>
        </router-link>
        <div class="xian"></div>
        <router-link tag="li" :to="'/history'">
          <span class="iconfont icon-liulanjilu"></span>
          <div>浏览记录</div>
        </router-link>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: 'CompanyTop',
  data () {
    return {
      name: '登录',
      avatar: ''
    }
  },
  beforeMount () {
    if (sessionStorage.getItem('token')) {
      this.name = sessionStorage.getItem('name')
      this.avatar = sessionStorage.getItem('avatar')
      let newStr = this.avatar.indexOf('http')
      if (newStr !== 0) {
        this.avatar = this.baseUrl + this.avatar
      }
    }
  },
  methods: {
    tiao () {
      if (this.name === '登录') {
        this.$router.push('/login')
      }
    }
  }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus" scoped>
.wrapper
  width 100%
  background-image url('~@/assets/img/my_bg.png')
  background-size 100%
  background-repeat no-repeat
  padding-top 1.8rem /* 90/50 */
  background-color #fff
  padding-bottom .52rem
  .top
    width 90%
    margin-left 5%
    margin-right 5%
    border-radius 10px
    box-shadow 0px 0px 5px 0px rgba(4, 0, 0, 0.1)
    background-color #fff
    position relative
    text-align center
    .top_img
      width 100%
      position absolute
      top -0.96rem /* 48/50 */
      text-align center
      img
        width 1.92rem /* 96/50 */
        height 1.92rem /* 96/50 */
        border 3px solid #FFFFFF
        box-shadow 0px 0px 10px 0px rgba(4, 0, 0, 0.1)
        border-radius 50%
    .top_name
      padding-top 1.32rem /* 66/50 */
      font-size .4rem /* 20/50 */
      font-weight bold
      margin-bottom .018rem /* 0.9/50 */
    ul
      width 100%
      li
        width 33%
        height .92rem /* 46/50 */
        float left
        margin-bottom .5rem /* 25/50 */
        margin-top .5rem /* 25/50 */
        font-size .26rem /* 13/50 */
        color #666666
        span
          font-size .5rem /* 25/50 */
          background linear-gradient(90deg, #FFCC00, #FFC000)
          -webkit-background-clip text
          -webkit-text-fill-color transparent
          text-shadow 1px 1px 5px rgba(227, 179, 13, 0.42)
        div
          margin-top .1rem /* 5/50 */
      .xian
        width 1px
        float left
        height .76rem /* 38/50 */
        margin-top .58rem /* 29/50 */
        background-color rgba(0,0,0,.1)
</style>
